<template>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">{{confirm.header}}</div>
    <div class="am-modal-bd">
      {{confirm.content}}
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm>{{confirm.confirm ? confirm.confirm : '确定'}}</span>
      <span class="am-modal-btn" data-am-modal-cancel>{{confirm.cancel ? confirm.cancel : '取消'}}</span>
    </div>
  </div>
</div>
</template>

<script>
  export default {
  	name: 'Confirm',
    props: {
      confirm: {
        type: Object,
        default: function () {
          return {
            header: '确认窗口',
            content: '确定要做此操作？',
          }
        }
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      show (v) {
        if (v == false) return
        let that = this
        $('#my-confirm').modal({
        onConfirm: function(options) {
          that.$emit('onConfirm', that.confirm.state ? that.confirm.state : '')
        }
      }).on('closed.modal.amui', () => {
        that.$emit('onCancel', false)
      })
      }
    },
     methods: {
    }
  }
</script>